<template>
  <scroll-view simple>
    <ul class="message-list">
      <li
        class="message-list-item"
        @click="handleItemClick(messageGroup[key].from)"
        v-for="key in Object.keys(messageGroup)"
        :key="key"
      >
        <el-avatar
          :size="50"
          :src="$V.staticBaseURL + messageGroup[key].from.avatar"
          @error="errorHandler"
        >
          <img
            :class="!messageGroup[key].from.online && 'gray'"
            :src="require(`@/assets/qq/${messageGroup[key].from.randomAvatarIndex ? messageGroup[key].from.randomAvatarIndex : '1'}.jpeg`)"
            alt
          />
        </el-avatar>
        <p>
          <span>{{ messageGroup[key].from.nickName }} 未读 {{ messageGroup[key].numUnread}}</span>
          <span class="status">{{messageGroup[key].lastMessage.text}}</span>
        </p>
      </li>
    </ul>
  </scroll-view>
</template>

<script>
import { batchReadMessageList } from '@/api'
import _ from 'lodash'
export default {
  inject: ['chat'],
  computed: {
    account () {
      return this.chat.account
    },
    userList () {
      return this.chat.userList
    },
    chatMessageList () {
      return this.chat.chatMessageList
    },
    // 消息分组
    messageGroup () {
      let group = _.groupBy(this.chatMessageList, it => it.chatId)
      let user
      let sortedMessageList
      let lastMessage
      let numUnread
      let from
      Object.keys(group).forEach(key => {
        sortedMessageList = _.sortBy(
          group[key],
          it => -new Date(it.createdAt)
        ).map(it => {
          user = this.userList.find(
            user =>
              +user.id === (+it.from === this.account.id ? +it.to : +it.from)
          )
          return {
            ...it,
            user
          }
        })
        lastMessage = sortedMessageList[0]
        from = sortedMessageList[0].user
        numUnread = sortedMessageList.filter(
          it => it.read === false && +it.to === +this.account.id
        ).length
        group[key] = {
          messageList: sortedMessageList,
          lastMessage,
          numUnread,
          from
        }
      })

      return group
    }
  },
  methods: {
    // ------------------------------ requests  ---------------------------------- */

    /**
     * 批量阅读由from 发出的消息
     */
    batchReadMessageList (from) {
      return this.Catch(batchReadMessageList, {
        onOk () {
          this.chat.getChatMessageList(true)
        }
      })(null, from)
    },
    // ------------------------------ !requests  ---------------------------------- */
    handleItemClick (user) {
      this.batchReadMessageList(user.id)
      this.chat.$emit('user.click', user)
    },

    errorHandler () {
      return true
    }
  }
}
</script>

<style scoped lang="scss">
.message-list {
  height: 100%;
  overflow-y: auto;
  > li {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 15px;
    transition: all 0.3s;
    &:hover {
      background: rgba(0, 0, 0, 0.05);
    }
    > .el-avatar {
      margin-right: 10px;
    }
    > p {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      > .status {
        font-size: 12;
        color: #999;
      }
    }
  }
}
</style>
